<template>
<div  >

  <!--  系统日志  -->
<!--  <el-page-header @back="goBack" title="系统管理" content="系统日志管理" ></el-page-header>-->
  <!--  分割线  -->
  <el-divider class="head"></el-divider>

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="API统计图" name="first">

      <div id="main" style="width: 1000px;height:800px;"></div>

    </el-tab-pane>
    <el-tab-pane label="详细数据" name="second">




  <el-table
      :data="SystemLog"
      height="500px"
      style="width: 100%">

    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">

     

          <el-form-item label="请求资源路径:">
            <span>{{ props.row.url }}</span>
          </el-form-item>
          <el-form-item label="请求方式:">
            <span>{{ props.row.method }}</span>
          </el-form-item>
          <el-form-item label="API接口:">
            <span>{{ props.row.api }}</span>
          </el-form-item>
          <el-form-item label="方法路径:">
            <span>{{ props.row.funPath }}</span>
          </el-form-item>
          <el-form-item label="调用的方法:">
            <span>{{ props.row.fun }}</span>
          </el-form-item>
          <el-form-item label="请求主机ip:">
            <span>{{ props.row.ip }}</span>
          </el-form-item>
          <el-form-item label="请求入参:">
            <span>{{ props.row.parmatr }}</span>
          </el-form-item>
          <el-form-item label="请求出参:">
            <span>{{ props.row.ginseng }}</span>
          </el-form-item>
          <el-form-item label="响应时间(ms):">
            <span>{{ props.row.requestDate }}</span>
          </el-form-item>
          <el-form-item label="请求时间:">
            <span>{{ props.row.startDate }}</span>
          </el-form-item>
<!--          <el-form-item label="执行sql:">-->
<!--            <span>{{ props.row.sql }}</span>-->
<!--          </el-form-item>-->

        </el-form>
      </template>
    </el-table-column>


    <el-table-column
        prop="url"
        label="请求资源路径"
        >
    </el-table-column>

    <el-table-column
        prop="method"
        label="请求方式"
        >
    </el-table-column>

    <el-table-column
        prop="api"
        label="API接口"
        >
    </el-table-column>

<!--    <el-table-column-->
<!--        prop="funPath"-->
<!--        label="方法路径"-->
<!--        width="180">-->
<!--    </el-table-column>-->
<!--    <el-table-column-->
<!--        prop="fun"-->
<!--        label="调用的方法"-->
<!--        width="180">-->
<!--    </el-table-column>-->

    <el-table-column
        prop="ip"
        label="请求主机ip"
        >
    </el-table-column>

<!--    <el-table-column-->
<!--        prop="parmatr"-->
<!--        label="请求入参"-->
<!--        width="180">-->
<!--    </el-table-column>-->
<!--    <el-table-column-->
<!--        prop="return.data.data"-->
<!--        label="请求出参"-->
<!--        width="180">-->
<!--    </el-table-column>-->
    <el-table-column
        prop="requestDate"
        label="响应时间(ms)"
        >
    </el-table-column>
    <el-table-column
        prop="startDate"
        label="请求时间"
        >
    </el-table-column>
  </el-table>






    </el-tab-pane>

  </el-tabs>
</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "SystemLog",
  data(){
    return{
      // loading:false,
      activeName:"first",
      SystemLog:[],// 查询日志的所有数据
      apiCount:[], // 查询API访问的次数
      nowDate:"", // 访问的时间
      api:[],
      count:[],
    }
  },
  created() {
    // this.loading = false
    this.queryLog()

  },
  mounted() {

  },
  methods:{
    handleClick(){},
    goBack(){ this.$router.go(-1) },
    queryLog(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("redislogs")
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
       this.SystemLog = res.data.data.apiAll;
       this.apiCount = res.data.data.apiCount;
       this.nowDate = res.data.data.nowDate;

       // console.log(this.apiCount)

       for (var i=0;i<this.apiCount.length;i++){
         this.api.push(this.apiCount[i].api)
         this.count.push(this.apiCount[i].count)
       }
        this.xian()
       // console.log(this.api,this.count)
       //  this.loading = false

      })
      .catch(() => {

      })

    },
    xian(){
      // console.log(this.api)
      // console.log(this.count)
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: 'API访问次数',
          subtext: "时间:"+this.nowDate,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: this.apiCount,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }

  }
}
</script>

<style scoped>

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

</style>